<template>
	<div class="footer-box">
		<div class="box-content">
			<div class="box-left">
				<ul class="footer-nav">
					<li class="nvab" @click="goToList(1)">首页</li>
					<li class="nvab" @click="goToList(2)">产品与服务</li>
					<li class="nvab" @click="goToList(3)">新闻动态</li>
					<li class="nvab" @click="goToList(4)">关于我们</li>
					<li @click="goToList(5)">加入我们</li>
				</ul>
				<div class="link">
					友情链接：
					<span v-for="(item,index) in linkList"><a :href="item.link" target="_blank">{{item.title}}</a></span>
				</div>
				<div class="text1">闽ICP备16014302号-2</div>
				<div class="text2">Copyright © 2018 卓越青凡 All Rights Reserved. By 远村</div>
			</div>
			<div class="box-middle">
				<span class="numbTitle">
					欢迎致电：
				</span>
				<span class="phone">0592-6031095</span>
				<div class="time">时间：周一至周五 09:00-18:00</div>
				<div class="address">地址：厦门市湖里区高崎北路428航空自贸广场1号楼305</div>
			</div>
			<div class="box-right">
				<div class="erwei">
					<img src="../../../../static/images/erwei.jpg" />
				</div>
				<span>微信公众号</span>
			</div>
		</div>
	</div>
</template>

<script>
	import api from '../../../api/loginApi'
	export default {
		data() {
			return {
				linkList:[]
			}
		},
		methods: {
			goToList: function(index) {
				this.backTop();
				if(index == 1) {

					this.$router.push({
						path: '/'
					});
				}
				if(index == 2) {
					this.$router.push({
						path: '/product'
					});
				}
				if(index == 3) {
					this.$router.push({
						path: '/news'
					});
				}
				if(index == 4) {
					this.$router.push({
						path: '/about'
					});
				}
				if(index == 5) {
					this.$router.push({
						path: '/joinUs'
					});
				}

			},
			//回到顶部
			backTop() {
				document.body.scrollTop = 0
				document.documentElement.scrollTop = 0
			},
			getFriendlyLink: function() {
				var par = {
				
				}
				api.getFriendlyLink(par, (res) => {
					//					res = JSON.parse(res);
					if(res.code == 0) {
						this.linkList = res.data;
					}
				});
			},
		},
		mounted() {
			this.getFriendlyLink();
		}
	}
</script>

<style lang="scss">
	@import '../../../styles/styles.scss';
	.footer-box {
		/*position: absolute;
		bottom: 0;
		left: 0;*/
		width: 100%;
		height: 240px;
		background: #283042;
		margin: 0 auto;
		color: #FFFFFF;
		font-family: 'MicrosoftYaHei';
		.box-content {
			width: 1280px;
			margin: 0 auto;
			.box-left {
				display: inline-block;
				width: 415px;
				padding-top: 46px;
				overflow: hidden;
				.footer-nav {
					padding-bottom: 18px;
					border-bottom: 1px solid #FFFFFF;
				}
				.footer-nav li {
					position: relative;
					display: inline-block;
					padding-right: 18px;
					font-size: 16px;
					&:hover {
						color: $typeColor;
						cursor: pointer;
					}
					&:last-child {
						padding-right: 0;
					}
				}
				.nvab {
					&:after {
						position: absolute;
						content: '';
						width: 2px;
						height: 16px;
						background: #FFFFFF;
						right: 6px;
						bottom: 2px;
					}
				}
				.link {
					padding-top: 15px;
					display: inline-block;
					vertical-align: middle;
					width: 100%;
					font-size: 12px;
					span {
						display: inline-block;
						padding-right: 15px;
						& a:hover {
							color: $typeColor;
							cursor: pointer;
						}
					}
				}
				.text1 {
					padding-top: 33px;
				}
				.text2 {
					padding-top: 15px;
				}
				.text1,
				.text2 {
					font-size: 12px;
				}
			}
			.box-middle {
				margin-left: 187px;
				display: inline-block;
				vertical-align: top;
				width: 415px;
				padding-top: 46px;
				.numbTitle {
					display: block;
					font-size: 16px;
				}
				.phone {
					display: block;
					padding-top: 12px;
					font-size: 30px;
				}
				.time {
					padding-top: 35px;
				}
				.address {
					padding-top: 12px;
				}
				.time,
				.address {
					font-size: 12px;
				}
			}
			.box-right {
				display: inline-block;
				vertical-align: top;
				padding-top: 39px;
				text-align: center;
				.erwei {
					width: 140px;
					height: 140px;
					text-align: center;
					background: url('../../../../static/images/erwboder.png') no-repeat;
					background-size: 140px 140px;
					img {
						padding-top: 8px;
						width: 124px;
						height: 124px;
					}
				}
				span {
					display: block;
					padding-top: 12px;
				}
			}
		}
	}
</style>